import React, {useEffect} from 'react';
import {Button, Form, Input, Select, Space} from "antd";
import {MinusCircleOutlined, PlusOutlined} from "@ant-design/icons";

function SubmitForm(props) {
    const {buttonName,type,changeValues,requestData} = props;
    const assertTypes = ["eq", "lt", "gt", "contains", "neq"];
    const [dataForm] = Form.useForm()
    const onChange = () => {
        const fieldsValue = dataForm.getFieldsValue();
        changeValues(fieldsValue)
    };

    useEffect(() => {
        dataForm.setFieldsValue(requestData)
        // eslint-disable-next-line
    }, [requestData]);

    return (
        <Form form={dataForm} onChange={onChange} autoComplete="off" style={{textAlign:"center"}}>
            <Form.List name={type}>
                {(fields, { add, remove }) => (
                    <>
                        {fields.map(({ key, name, ...restField }) => (
                            <Space key={key} style={{ display: 'flex' }} align="baseline">
                                <Form.Item
                                    {...restField}
                                    name={[name, 'key']}
                                    rules={[{ required: true, message: '请输入变量' }]}
                                >
                                    <Input placeholder="变量" />
                                </Form.Item>
                                <Form.Item
                                    {...restField}
                                    name={[name, 'assertType']}
                                    rules={[{ required: type==='asserts' || type==='databaseAsserts', message: '请输入断言方式' }]}
                                    style={{display:type==='asserts' || type==='databaseAsserts'?"block":'none',width:'30vh'}}
                                >
                                    <Select
                                        placeholder="请选择断言方式"
                                        allowClear
                                        onChange={onChange}
                                    >
                                        {assertTypes.map(i => {
                                            return <Select.Option key={i}
                                                                  value={i}>{i}</Select.Option>
                                        })}
                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    {...restField}
                                    name={[name, 'value']}
                                    rules={[{ required: true, message: '请输入值' }]}
                                >
                                    <Input placeholder="值" />
                                </Form.Item>
                                <MinusCircleOutlined onClick={() => {
                                    remove(name)
                                    const fieldsValue = dataForm.getFieldsValue();
                                    changeValues(fieldsValue)
                                }} />
                            </Space>
                        ))}
                        <Form.Item>
                            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                {buttonName}
                            </Button>
                        </Form.Item>
                    </>
                )}
            </Form.List>
        </Form>
    );
}

export default SubmitForm;